<template>
	<view>
		<uni-card>
			<!-- <image style=" width: 100%; height: 120px;" :src="courseimg" mode=""></image> -->
			<video id="myVideo" :src="src" @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls
			 poster="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/poster.png"></video>
			<view class="uni-list uni-common-mt">
				<view class="uni-list-cell">
					<view>
						<view class="uni-label">弹幕内容</view>
					</view>
					<view class="uni-list-cell-db">
						<input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
					</view>
				</view>
			</view>
			<view class="uni-btn-v">
				<button @click="sendDanmu" class="page-body-button">发送弹幕</button>
			</view>
		</uni-card>
		<view class="top_tabs">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
			<u-divider :half-width='350' :margin-top='20' :use-slot='false'></u-divider>
		</view>
		<view v-if="current==2" class="kcpl">
			<view>
				请对本课程评个分吧！
			</view>
			<view class="course_body_rate">
				<u-rate active-icon="heart" :disabled="rateable" :size="50" :count=5 v-model="star" @change="changerate()"></u-rate>
			</view>
			<view class="plindex" v-for="(items,value) in comments" :key="value">
				<u-avatar :src="items.img"></u-avatar>
				<view class="text">{{items.username}}</view>
				<u-rate :count="count" v-model="items.star" class="plrate"></u-rate>
				<view class="time">{{items.time}}</view>
				<view class="comment">{{items.comment}}</view>
				<view style="margin-top: 70rpx;margin-left: 150rpx;">
					<u-divider :half-width='280' :use-slot='false'></u-divider>
				</view>
			</view>
		</view>
		<view v-if="current==1" class="kcml">
			<u-empty :margin-top=150 text="目录为空" mode="list" v-if="showempty"></u-empty>
			<view class="toadd" v-for="(chapter,index) in chapterlist">
				<u-button :type=chapter.buttontype shape="square" @click="changeurl(chapter)" :plain="true">
				{{chapter.chaptername}}
				</u-button>
			</view>
		</view>
		<view v-if="current==0" class="kcjs">
			<u-empty :margin-top=150 text="介绍为空" mode="list"></u-empty>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: 5,
				value: 0,
				danmuList: [{
						text: '第 1s 出现的弹幕',
						color: '#ff0000',
						time: 1
					},
					{
						text: '第 3s 出现的弹幕',
						color: '#ff00ff',
						time: 3
					}
				],
				danmuValue: '',
				list: [{
					name: '介绍'
				}, {
					name: '目录'
				}, {
					name: '评分'
				}],
				current: 1,
				comments: [],
				courseid: 0,
				scid: 0,
				showempty: true,
				courseimg: '',
				src: '',
				chapterlist: {},
				rateable: false,
				star: 0
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option)
			this.courseid = option.id;
			this.scid = option.scid;
			this.star = option.star
		},
		onReady() {
			// #ifndef MP-ALIPAY || MP-TOUTIAO
									this.videoContext = uni.createVideoContext('myVideo')
									// #endif
						// #ifdef APP-PLUS || MP-BAIDU
						setTimeout(()=>{
							this.showVideo = true
						},350)
						// #endif
						// #ifndef APP-PLUS || MP-BAIDU
						this.showVideo = true
						// #endif
			this.getchapter();
			this.getcomment();
			if (this.star != 'null')
				this.rateable = true;
		},
		methods: {
			rate(ra) {
				this.value = ra;
				console.log(this.value);
			},
			change(index) {
				this.current = index;

			},
			changerate() {
				console.log(this.star);
				this.rateable = true;
				this.$http('/studentrate', {
					scid: this.scid,
					star: this.star,
					courseid: this.courseid
				})
			},
			getcomment() {
				let this_ = this;
				this.$http('/getcomment', {
					courseid: this.courseid
				}).then((res) => {
					this_.comments = res;
				})
			},
			getchapter() {
				console.log(this.$refs)
				var that = this;
				this.$http('/getchapter', {
					courseid: this.courseid
				}).then((res) => {
					that.chapterlist = res;
					if (res.length != 0) {
						that.showempty = false;
					}
					for(let i =0;i < that.chapterlist.length;i++)
					{
						that.chapterlist[i].buttontype = 'default'
					}
					console.log(that.chapterlist);
				}).catch((Error) => {
					console.log("error");
				})
			},
			changeurl(url) {
				this.src = url;
			},
			sendDanmu: function() {
				this.videoContext.sendDanmu({
					text: this.danmuValue,
					color: this.getRandomColor()
				});
				this.danmuValue = '';
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			getRandomColor: function() {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			},
			changeurl(e) {
				e.buttontype = 'error';
				this.src = e.url;
				console.log(e);
				this.$http('/addwatch', {
						studentid: uni.getStorageSync("stuid"),
						courseid: e.courseid,
						chapterid: e.chapterid
					})
					.then((res) => {
						console.log(res);
					})
			}

		}
	}
</script>

<style>
	.top_image {
		display: flex;
		justify-content: center;
		width: 120rpx;
		height: 200rpx;
	}

	.toadd {
		margin-top: 20rpx;
	}

	.kcpl {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
	}

	.course_body_rate {
		margin-top: 30rpx;
	}

	.plindex {
		position: relative;
		display: flex;
		justify-content: start;
		flex-wrap: wrap;
		margin-top: 30rpx;
	}

	.plindex .plrate {
		margin-left: 300rpx;
	}

	.plindex .text {
		margin-left: 50rpx;
	}

	.plindex .time {
		position: absolute;
		top: 50rpx;
		left: 140rpx;
	}

	.plindex .comment {
		position: absolute;
		top: 100rpx;
		left: 140rpx;
		font-size: 35rpx;
	}
</style>
